<template>
  <div>
    <el-dialog
      ref="refDlg"
      title="可替换产品"
      :visible.sync="dialogShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="clearForm"
      width="700px"
      @close="closeDialog"
    >
      排序：
      <el-select v-model="sortType" placeholder="请选择" @change="changeSort">
        <el-option
          v-for="item in sortTypeList"
          :key="item.dictCode"
          :label="item.dictName"
          :value="item.dictCode"
        />
      </el-select>
      <!-- :other-raw="params" -->
      <table-box
        ref="refTable2"
        table-size="mini"
        :table-config="tableConfig2"
        show-index
        :table-height="300"
        :show-custom-setting="false"
        :other-filters="otherFilter"
        :other-raw="otherRaws"
        @row-click="selectionChangeHandle"
      />
      <div slot="footer">
        <el-button size="mini" @click="closeDialog">取消</el-button>
        <el-button size="mini" :loading="submiting" type="primary" @click="submitForm">确定</el-button>
      </div>
      <el-image-viewer
        v-if="imgDialogVisible"
        style="z-index: 3000;"
        :on-close="handleCloseImg"
        :url-list="previewImgs"
      />
    </el-dialog>
  </div>

</template>

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

import { otherFiltersItem } from '@/utils'
import { getDictByPatchType } from '@/api/dataDict'

import { saveChange } from '@/api/display/recommend'
export default {

  name: 'EditForm',
  components: { ElImageViewer },
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    relationData: {
      type: Object,
      default: () => { return {} }
    },
    params: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    const that = this
    return {
      // otherFilters: [],
      imgDialogVisible: false,
      previewImgs: [],
      selectData: {},
      otherRaws: {},
      submiting: false,
      sortType: '',
      sortTypeList: [],
      tableConfig2: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/displaySalesRanking/queryPage`,
        buttonGroupCode: 'default',
        hideSearchBar: true,
        tabIndex: 3,
        pageSize: 10,
        // order: 'desc',
        // sort: 'marketTime',
        setting: [
          {
            prop: 'pic',
            label: '产品主图',
            minWidth: '80',
            render: (h, data, row) => {
              const DomArr = [
                <div style='display:flex'>
                  <img
                    onClick={that.handlePreview.bind(this, data)}
                    src={'https://gcenterimg.quanyou.com.cn/' + data.pic}
                    height='50'
                    width='50'
                  >
                  </img>
                </div>
              ]
              return DomArr
            }
          },
          {
            prop: 'productName',
            label: '产品名称',
            minWidth: '160'
          },
          {
            prop: 'productLocation',
            label: '产品定位',
            minWidth: '90'
          },
          {
            prop: 'modelNumber',
            label: '型号',
            minWidth: '90'
          },
          {
            prop: 'marketTime',
            label: '上市时间',
            minWidth: '120'
          },
          {
            prop: 'productSize',
            label: '尺寸',
            minWidth: '90'
          },
          {
            prop: 'price',
            label: '价格',
            minWidth: '90'
          }
        ]
      }
    }
  },

  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  async created() {
    this.sortType = this.relationData.sampleType

    if (this.relationData.productLocation === '形象款' || this.relationData.productLocation === '促销款') {
      this.otherRaws = { sortSampleType: this.sortType }
      this.otherFilter = [otherFiltersItem('shopCode', this.relationData.shopCode, '='),
        // otherFiltersItem('price', this.relationData.price, '='),
        // otherFiltersItem('productSize', this.relationData.productSize, '='),
        otherFiltersItem('sampleType', this.relationData.sampleType, '='),
        otherFiltersItem('displayAreaCode', this.relationData.displayAreaCode, '='),
        otherFiltersItem('productLocation', this.relationData.productLocation, '=')
      ]
    } else {
      this.otherRaws = { ... this.params, sortSampleType: this.sortType }
      this.otherFilter = [otherFiltersItem('shopCode', this.relationData.shopCode, '='),
        otherFiltersItem('productLocation', this.relationData.productLocation, '='),
        otherFiltersItem('price', this.relationData.price, '='),
        otherFiltersItem('productSize', this.relationData.productSize, '='),
        otherFiltersItem('sampleType', this.relationData.sampleType, '='),
        otherFiltersItem('displayAreaCode', this.relationData.displayAreaCode, '=')
      ]
    }
    const { SAMPLE_TYPE } = await getDictByPatchType(['SAMPLE_TYPE'])
    this.sortTypeList = SAMPLE_TYPE // 排序方式
  },

  methods: {
    // 关闭图片预览
    handleCloseImg() {
      this.imgDialogVisible = false
    },
    handlePreview(data) {
      this.previewImgs = ['https://gcenterimg.quanyou.com.cn/' + data.pic]
      this.imgDialogVisible = true
    },
    changeSort(data) {
      // this.otherFilter = [otherFiltersItem('shopCode', this.relationData.shopCode, '='),
      //   otherFiltersItem('productLocation', this.relationData.productLocation, '='),
      //   otherFiltersItem('price', this.relationData.price, '='),
      //   otherFiltersItem('productSize', this.relationData.productSize, '='),
      //   otherFiltersItem('sampleType', data, '='),
      //   otherFiltersItem('displayAreaCode', this.relationData.displayAreaCode, '=')
      // ]
      this.otherRaws = { sortSampleType: data }
      this.$nextTick(() => {
        this.$refs.refTable2.initTableData()
      })
    },
    selectionChangeHandle(data) {
      this.selectData = data
    },

    closeDialog() {
      this.dialogShow = false
      this.clearForm()
    },
    clearForm(done) {
      this.sortType = 'A'
      this.selectData = {}
      done && done()
    },
    // 提交表单处理
    submitForm() {
      console.log(this.selectData)
      if (!this.selectData.row) {
        this.$massage.warning('请选择数据')
        return
      }
      if (this.submiting) return
      const data = { id: this.relationData.relationId, displaySalesRankingId: this.selectData.row.id }
      console.log('保存数据', data)
      // return
      this.submiting = true
      saveChange(data).then(res => {
        if (res.success) {
          this.$message.success('替换成功')
          this.$emit('success')
          this.closeDialog()
        }
        this.submiting = false
      }).catch(() => {
        this.submiting = false
      })
    }
  }
}
</script>
<style lang='scss' scoped>
// /deep/.el-radio__input {
//     display: none;
//     cursor: pointer;
//     vertical-align: middle;
// }
// /deep/.qup-search-form .qup-search-item .el-radio-group .el-radio {
//     border: 1px solid #3dc094;
//     padding-right: 5px;
//     border-radius: 3px;
//     line-height: 28px;
// }
// /deep/.qup-search-form .qup-search-item .el-radio__input.is-checked+.el-radio__label {
//     color: #fff;
// }
// /deep/label.el-radio.is-checked {
//     background-color: #3dc094;
//     color: #fff
// }
</style>
